<template>
  <div class="col-lg-12">
    <div class="card">
      <div class="card-toolbar d-flex flex-column flex-md-row">
        <el-col :span="24">
          <div class="container-title-button">
            <el-button-group>
              <el-button type="success" size="medium" @click="startContainerClick"><i
                  class="el-icon-video-play"></i><span>Start</span></el-button>
              <el-button type="danger" size="medium" @click="stopContainerClick"><i
                  class="el-icon-switch-button"></i><span>Stop</span></el-button>
              <el-button type="danger" size="medium"><i class="el-icon-close"></i><span>Kill</span></el-button>
              <el-button type="primary" size="medium"><i class="el-icon-refresh-left"></i><span>Restart</span>
              </el-button>
              <el-button type="primary" size="medium"><i class="el-icon-video-pause"></i><span>Pause</span></el-button>
              <el-button type="primary" size="medium"><i class="el-icon-refresh"></i><span>Resume</span></el-button>
              <el-button type="danger" size="medium"><i class="el-icon-delete"></i><span>Remove</span></el-button>
            </el-button-group>
            <el-button-group>
              <el-button type="primary" size="medium"><i class="el-icon-plus"></i><span>Create container</span>
              </el-button>
            </el-button-group>
          </div>
        </el-col>
      </div>

      <div class="card-body">
        <div class="table-responsive">
          <el-table class="table table-bordered" :data="tableData" stripe style="width: 100%"
            @selection-change="handleSelectionChange" @row-click="openDetails">
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column label="ID" width="180">
              <template v-slot="scope">
                <span style="margin-left: 10px">{{ scope.row.Id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Name" width="160">
              <template v-slot="scope">
                <span style="margin-left: 10px">{{ scope.row.Names }}</span>
              </template>
            </el-table-column>
            <el-table-column label="State" width="160">
              <template v-slot="scope">
                <div class="name-wrapper">
                  <el-tag size="medium" :type="scope.row.State === 'exited' ? 'primary' : 'success'">
                    {{ scope.row.State }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="Image">
              <template v-slot="scope">
                <span style="margin-left: 10px">{{ scope.row.Image }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Created">
              <template v-slot="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.Created }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Actions">
              <template v-slot="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <ul class="pagination">
          <ul class="pagination" id="paginationDiv"></ul>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { containersGetList } from "@/network/containers.js";
export default {
  name: "Container",
  data() {
    return {
      tableData: []
      ,
      multipleSelection: []
    }
  },
  created() {
    containersGetList().then((res) => {
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data
      }
    })
  }
  ,
  watch: {
    multipleSelection: function () {
      let arr = [];
      for (let i in this.multipleSelection) {
        arr.push(this.multipleSelection[i].Id);
      }
      console.log('勾中的id为：' + arr.join());
    }
  },
  methods: {
    //打开详情页弹窗
    openDetails(row) {
      alert(row.Id);
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
    },
    stopContainerClick() {
      let arr = [];
      for (let i in this.multipleSelection) {
        arr.push(this.multipleSelection[i].Id);
      }
     alert('勾中的id为：' + arr.join());
    }

  }


};
</script>